<template>
    <div>
      <el-carousel style="height:600px;" indicator-position="outside" :autoplay="false">
    <el-carousel-item style="height:600px;">
      <img src="@/assets/chengren.png" style="width:100%;height:100%" alt="">
    </el-carousel-item>
    <el-carousel-item style="height:600px;">
      <img src="@/assets/chengren1.png" style="width:100%;height:100%" alt="">
    </el-carousel-item>
    <el-carousel-item style="height:600px;">
      <img src="@/assets/chengren2.png" style="width:100%;height:100%" alt="">
    </el-carousel-item>
    <el-carousel-item style="height:600px;">
      <h2 style="margin-left:10px">建设内容</h2>
      <el-button type="primary" @click="dialogFormVisible=true" style="margin:20px 30px">新增</el-button>
       <div class="content">
          <div class="left">
            管理业务应用层
          </div>
          <div class="right">
              <div class="rightres" v-for="(item,index) in tableData" :key="index">
                  <div>
                    <el-button @click="diest(item)" class="butt">{{item.moduleName}}</el-button>

                 <span
                @click="handleEdit(item)"
              >修改&nbsp;</span>
              <span
                @click="del(item)"
              >删除</span>
                    
                  </div>
              </div>
          </div>
       </div>
    </el-carousel-item>
  </el-carousel>
       <!-- 新增 -->
       <el-dialog title="添加" :visible.sync="dialogFormVisible">
  <el-form :model="form">
    <el-form-item label="模块名称:">
      <el-input v-model="form.moduleName" style="width:500px"></el-input>
    </el-form-item>
    <el-form-item label="模块内容:">
      <el-input v-model="form.contentOne" style="width:500px"></el-input>
    </el-form-item>
    <el-form-item label="模块图片:">
      <el-upload
        class="avatar-uploader"
        action="https://jsonplaceholder.typicode.com/posts/"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload">
        <img v-if="form.pictureImg" :src="form.pictureImg" class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="addout">确 定</el-button>
  </div>
</el-dialog>
<!-- 修改 -->
       <el-dialog title="添加" :visible.sync="editding">
  <el-form :model="editform">
    <el-form-item label="模块名称:">
      <el-input v-model="editform.moduleName" style="width:500px"></el-input>
    </el-form-item>
    <el-form-item label="模块内容:">
      <el-input v-model="editform.contentOne" style="width:500px"></el-input>
    </el-form-item>
    <el-form-item label="模块图片:">
      <el-upload
        class="avatar-uploader"
        action="https://jsonplaceholder.typicode.com/posts/"
        :show-file-list="false"
        :on-success="handleAvatarSuccesss"
        :before-upload="beforeAvatarUploads">
        <img v-if="editform.pictureImg" :src="editform.pictureImg" class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="editout">确 定</el-button>
  </div>
</el-dialog>
         
    </div>
</template>

<script>
import { HelpList,HelpAdd,HelpEdit,HelpDel } from "@/api/helpArr/helpList";
export default {
    data() {
      return {
        tableData:[],
        form:{
          moduleName:'',
          contentOne:'',
          pictureImg:'',
        },
        editform:{
          moduleName:'',
          contentOne:'',
          pictureImg:'',
          id:''
        },
        dialogFormVisible:false,
        editding:false,
      }
    },
  

    mounted() {
     this.getLsit()
    },
    methods: {
      //列表数据
       async getLsit(){
         let res=await HelpList()
         console.log(res)
         this.tableData=res.rows
       },
       //添加
       async addout(){
         let res=await HelpAdd(this.form)
         console.log(res)
         this.$message.success("添加成功");
         this.getLsit()
         this.dialogFormVisible=false
       },
       //修改
       handleEdit(item){
         console.log(item)
          this.editding=true
          this.editform.moduleName=item.moduleName
          this.editform.contentOne=item.contentOne
          this.editform.pictureImg=item.pictureImg
          this.editform.id=item.id
       },
       async editout(){
          let res=await HelpEdit(this.editform)
          console.log(res)
          this.$message.success("修改成功");
         this.getLsit()
         this.editding=false
       },
       //删除
       del(item){
            this.$confirm("确认删除记录吗?", "提示", {
        type: "warning"
      })
        .then(() => {
          HelpDel({ id: JSON.stringify(item.id) }).then(res => {
            console.log(res);
            this.$message.success("删除成功");
            this.getLsit();
          });
        })
        .catch(() => {});
       },
       
       //详情
       diest(item){
         this.$router.push({
        name: "/helpCheck",
        params: {
          id: item.id
        }    
      });
       localStorage.setItem('id',item.id)
       },
      //  上传图片
      handleAvatarSuccess(res, file) {
        this.form.pictureImg = URL.createObjectURL(file.raw);
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
      //  上传图片
      handleAvatarSuccesss(res, file) {
        this.form.pictureImg = URL.createObjectURL(file.raw);
      },
      beforeAvatarUploads(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      }
    },
};
</script>

<style lang='scss' scoped >
  .el-carousel__item:nth-child(2n) {
    background-color: #ffffff;
    height: 600px;
  }
  .content{
    display: flex;
    .left{
      flex: 1;
      width: 180px;
      height: 200px;
      background: #bfbfbf;
      text-align: center;
      line-height: 200px;
      margin: 200px 80px;
    }
    .right{
      flex: 2;
      .rightres{
        width: 300px;
        height: 50px;
        background:#dae3f3;
        border-radius: 15px;
        margin: 20px 30px;
        .butt{
          background:#dae3f3;
          width: 210px;
          height: 100%;
          
        }
      }
    }
  }
    .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
